<template>
  <div>
    <div class="upper">
      <span style="margin-left: 10px">搜索用户数</span>
      <span style="margin-right: 25px"
        ><i
          class="el-icon-info"
          style="font-size: 20px; color: #bdb4b4; margin-left: 20px"
        ></i
      ></span>
    </div>
    <div class="middle">
      <span>12321</span>
      <span style="font-size: 14px; color: #bdb4b4; margin-left: 20px"
        >17.1</span
      >
      <span
        ><i
          class="el-icon-caret-bottom"
          style="font-size: 20px; color: #67c23a"
        ></i
      ></span>
      <span
        ><i
          class="el-icon-caret-top"
          style="font-size: 20px; color: #f56c6c"
        ></i
      ></span>
    </div>
    <div class="lower">
      <div class="charts" ref="charts"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "lineCharts",
  mounted() {
    // 引入echarts
    let echarts = require("echarts");
    //初始化echarts实例
    let lineCharts = echarts.init(this.$refs.charts);
    // 配置数据
    lineCharts.setOption({
      xAxis: {
        show: false, // 隐藏x轴
        type: "category",
      },
      yAxis: {
        show: false, // // 隐藏y轴
      },
      //系列
      series: [
        {
          type: "line",
          data: [11, 8, 33, 12, 22, 14],
          // 拐点样式的设置
          itemStyle: {
            opacity: 0, // 透明度0
          },
          // 线段样式设置
          lineStyle: {
            color: "blue",
          },
          // 填充颜色
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              //   渐变色
              colorStops: [
                {
                  offset: 0,
                  color: "blue",
                },
                {
                  offset: 1,
                  color: "white",
                },
              ],
              global: false, //缺省为fasle
            },
          },
        },
      ],
      //布局调试
      grid: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
      },
    });
  },
};
</script>

<style scoped>
.upper {
  display: flex;
  /* 垂直居中 */
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.middle {
  margin-bottom: 15px;
}
.lower .charts {
  width: 100%;
  height: 50px;
}
</style>